<template>
	<view class="s1">
		<view class="s2" v-for="item in detail">
			<view class="s3">
				<text>{{item.first}}——</text>
				<text>{{item.end}}</text>
			</view>
			<text>剩余时间：无</text>
			<text>间隔几站：无</text>
			<text>剩余距离：无</text>
		</view>
		<scroll-view scroll-x>
			<view class="s4">
				<view class="s5" v-for="item in list">
					<u-icon name="minus-circle-fill" label="———"></u-icon>
					<text :style="{color:item.name==='建国门'? 'red':'black'}">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				detail:[],
				id:0,
				
			}
		},onLoad(options) {
			this.id=options.id
			uni.setNavigationBarTitle({
				title:options.name
			})
			this.getdetail()
			this.getlist()
		},
		methods: {
			getlist(){
				this.api.get('/prod-api/api/metro/step/list?lineId='+this.id).then(res=>{
					this.list=res.data.data
					
				})
			},
			getdetail(){
				this.api.get('/prod-api/api/metro/line?lineIds='+this.id+'&name=建国门').then(res=>{
					this.detail=res.data.data.lineList
					console.log(this.detail)
				})
			}
			
		}
	}
</script>

<style lang="scss">
.s2{
	width: 250px;
	border: 1px solid #ccc;
	line-height: 30px;
	display: flex;
	flex-direction: column;
	text-align: center;
	text{
		color: red;
	}
	margin: 20px auto;
	.s3{
		text{
			color: black;
		}
	}
}
.s4{
	display: flex;
	.s5{
		// display: inline-block;
		text{
			writing-mode: vertical-lr;
			letter-spacing: 20px;
		}
	}
}
</style>
